<template>
    <el-menu mode="horizontal" :ellipsis="false" @select="onSelectMenu" class="dark:bg-dark-900">
        <el-menu-item index="0">
            <img style="width: 32px" src="/images/logo/logo64.svg" alt="Element logo" />
        </el-menu-item>
        <el-sub-menu index="home">
            <template #title>首页</template>
            <el-menu-item index="home-welcome">欢迎页</el-menu-item>
            <el-menu-item index="home-sgj">时光机</el-menu-item>
            <el-menu-item index="home-h5">手机版</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="help">
            <template #title>帮助</template>
            <el-menu-item index="help-color">颜色说明</el-menu-item>
            <el-menu-item index="help-rewards">奖项说明</el-menu-item>
            <el-sub-menu index="help-link">
                <template #title>资讯交流</template>
                <el-menu-item index="help-link-01">
                    <el-link href="https://www.lottery.gov.cn/dlt/index.html" target="_blank">中国体彩网</el-link>
                </el-menu-item>
                <el-menu-item index="help-link-02">
                    <el-link href="https://daletou.cjcp.cn/" target="_blank">彩经网</el-link>
                </el-menu-item>
                <el-menu-item index="help-link-03">
                    <el-link href="https://www.yiqicai.com/dlt" target="_blank">一起彩</el-link>
                </el-menu-item>
                <el-menu-item index="help-link-04">
                    <el-link href="https://trade.500.com/dlt/" target="_blank">500彩票网</el-link>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="help-about">关于</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="view">
            <template #title>视图</template>
            <el-menu-item index="view-wave">波浪图</el-menu-item>
            <el-menu-item index="view-lighting">闪电图</el-menu-item>
            <el-menu-item index="view-firework">烟花图</el-menu-item>
            <el-menu-item index="view-xuanhao">选号大厅</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="view-line">
            <template #title>走势线</template>
            <el-menu-item :index="`view-line-${i}`" v-for="i in 7">{{ i }}号</el-menu-item>
            <el-menu-item index="view-line-0">清除</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="view-pool">
            <template #title>选号池</template>
            <el-menu-item :index="`view-pool-${i}`" v-for="i in 7">{{ i }}号</el-menu-item>
            <el-menu-item index="view-pool-0">清除</el-menu-item>
            <el-menu-item index="view-pool-setting">设置</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="jx">
            <el-icon>
                <MagicStick />
            </el-icon>
            <el-tooltip content="点击选号，更多配置请到菜单栏【工具】/【选号设置】中设置">
                机选
            </el-tooltip>
        </el-menu-item>
        <li>
            <ComClock class="text-gray-400 me-3"></ComClock>
            <ThemeSwitch class="me-1"></ThemeSwitch>
            <RefreshButton></RefreshButton>
        </li>
    </el-menu>
    <RewardsHelpDialog v-model="rewardsDialogInfo.visible"></RewardsHelpDialog>
    <ColorHelpDialog v-model="colorDialogInfo.visible"></ColorHelpDialog>
    <AboutDialog v-model="aboutDialogInfo.visible"></AboutDialog>
    <XhszDialog v-model="xhszDialogInfo.visible"></XhszDialog>
    <SgjDialog v-model="sgjDialogInfo.visible"></SgjDialog>
</template>

<script setup>

import ComClock from './com-clock/ComClock.vue';
import ThemeSwitch from '@/components/ThemeSwitch.vue';
import RefreshButton from './RefreshButton.vue';
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import RewardsHelpDialog from '../help/RewardsHelpDialog.vue';
import ColorHelpDialog from '../help/ColorHelpDialog.vue';
import AboutDialog from '../help/AboutDialog.vue';
import XhszDialog from '../tool/XhszDialog.vue';
import SgjDialog from '../tool/SgjDialog.vue';
import { useDltFilterStateStore } from '@/stores/DltFilterState';
import { useDltChartStateStore } from '@/stores/DltChartState';
import DltOrderModel from '@/model/DltOrderModel';

let dltOrderModel = new DltOrderModel();
const router = useRouter();
const dltFS = useDltFilterStateStore();
const dltCS = useDltChartStateStore();

const rewardsDialogInfo = ref({ visible: false });
const colorDialogInfo = ref({ visible: false });
const aboutDialogInfo = ref({ visible: false });
const xhszDialogInfo = ref({ visible: false });
const sgjDialogInfo = ref({ visible: false });
const columns = ref(['', '', '', '', '', '', '']);

watch(() => dltCS.getPoolNums(), (newVal) => {
    columns.value[dltCS.getColumnIndex()] = newVal.join(' ');
})

const onSelectMenu = (key, keyPath) => {
    console.log('onSelectMenu', key, keyPath);
    if (key.startsWith('view-line-')) {
        let idx = parseInt(key.substring('view-line-'.length)) - 1;
        dltCS.setColumnIndex(idx);
        dltCS.setPoolNums(idx == -1 ? [] : columns.value[idx].trim().split(' ').filter(v => v.trim().length > 0));
        return;
    }
    if (key.startsWith('view-pool-')) {
        if (key == 'view-pool-setting') {
            // 选号设置
            xhszDialogInfo.value.visible = true;
            return;
        }
        let idx = parseInt(key.substring('view-pool-'.length)) - 1;
        dltCS.setColumnIndex(idx);
        dltCS.setPoolNums(idx == -1 ? [] : columns.value[idx].trim().split(' ').filter(v => v.trim().length > 0));
        return;
    }
    switch (key) {
        case 'jx':
            // 机选
            dltFS.setChooseNums(dltOrderModel.getRandomNums7('columns', 1, ''));
            break;
        case 'home-welcome':
            // 首页
            router.push('/index');
            break;
        case 'home-sgj':
            // 首页/时光机
            sgjDialogInfo.value.visible = true;
            break;
        case 'home-h5':
            // 首页/H5选号
            router.push('/dlt/h5');
            break;
        case 'view-wave':
            // 视图/波浪图
            router.push('/dlt/wave');
            break;
        case 'view-lighting':
            // 视图/闪电图
            router.push('/dlt/lighting');
            break;
        case 'view-firework':
            // 视图/烟花图
            router.push('/dlt/firework');
            break;
        case 'view-xuanhao':
            // 视图/选号大厅
            router.push('/dlt/xuanhao');
            break;
        case 'help-color':
            colorDialogInfo.value.visible = true;
            break;
        case 'help-rewards':
            rewardsDialogInfo.value.visible = true;
            break;
        case 'help-about':
            aboutDialogInfo.value.visible = true;
            break;
    }
}


</script>